import type { Notification } from "@/api/services/notification";
import { notificationService } from "@/api/services/notification";
import { ArrowLeftOutlined, BellOutlined } from "@ant-design/icons";
import {
	Button,
	Card,
	Col,
	Empty,
	Row,
	Spin,
	Tag,
	Typography,
	message,
} from "antd";
import type React from "react";
import { useEffect, useState } from "react";

const { Text, Title } = Typography;

interface NotificationListProps {
	isMobile?: boolean;
	onBack?: () => void;
}

const NotificationList: React.FC<NotificationListProps> = ({
	isMobile,
	onBack,
}) => {
	const [notifications, setNotifications] = useState<Notification[]>([]);
	const [loading, setLoading] = useState(false);

	useEffect(() => {
		fetchNotifications();
	}, []);

	const fetchNotifications = async () => {
		try {
			setLoading(true);
			const response = await notificationService.notificationList({
				page: 1,
				limit: 100,
			});
			setNotifications(response.items || []);
		} catch (error) {
			message.error("获取通知列表失败");
		} finally {
			setLoading(false);
		}
	};

	const getStatusTag = (status: string) => {
		const statusMap = {
			unread: { color: "blue", text: "未读" },
			read: { color: "green", text: "已读" },
		};
		const statusInfo = statusMap[status as keyof typeof statusMap] || {
			color: "default",
			text: status,
		};
		return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
	};

	if (loading) {
		return (
			<div style={{ textAlign: "center", padding: "50px" }}>
				<Spin size="large" />
			</div>
		);
	}

	if (!notifications.length) {
		return (
			<Card>
				<Empty description="暂无通知" />
			</Card>
		);
	}

	const content = (
		<div style={{ padding: "24px" }}>
			<Row gutter={[16, 16]}>
				{notifications.map((notification) => (
					<Col span={24} key={notification.id}>
						<Card hoverable>
							<div
								style={{
									display: "flex",
									justifyContent: "space-between",
									alignItems: "flex-start",
									marginBottom: "12px",
								}}
							>
								<div style={{ display: "flex", alignItems: "center" }}>
									<BellOutlined
										style={{
											fontSize: "16px",
											color: "#1890ff",
											marginRight: "8px",
										}}
									/>
									<Text strong style={{ fontSize: "16px" }}>
										{notification.title}
									</Text>
								</div>
								{getStatusTag(notification.status)}
							</div>
							<div style={{ marginBottom: "12px" }}>
								<Text style={{ fontSize: "14px" }}>{notification.content}</Text>
							</div>
							<div>
								<Text type="secondary" style={{ fontSize: "12px" }}>
									{new Date(notification.createtime * 1000).toLocaleString()}
								</Text>
							</div>
						</Card>
					</Col>
				))}
			</Row>
		</div>
	);

	if (isMobile) {
		return (
			<Card
				title="变动通知"
				extra={
					<Button type="link" icon={<ArrowLeftOutlined />} onClick={onBack}>
						返回
					</Button>
				}
				style={{ height: "100vh", borderRadius: 0 }}
				bodyStyle={{
					padding: 0,
					height: "calc(100vh - 55px)",
					overflowY: "auto",
				}}
			>
				{content}
			</Card>
		);
	}

	return content;
};

export default NotificationList;
